<template>
  <div class="stars">
    <div class="shine" v-for="(star, index) in stars" :key="index"
      :style="'left: '+ star.left + '%;top: ' + star.top + '%;width: ' + star.width + 'px;height: ' + star.width + 'px;'">
    </div>
  </div>
</template>

<script>
export default {
  props: {
    starCount: {
      type: Number,
      default: 20
    }
  },
  data() {
    return {
      stars: [],
      starInterval: null,
      curIndex: 0
    }
  },
  beforeDestroy() {
    clearInterval(this.starInterval)
  },
  mounted() {
    if (this.starInterval) {
      clearInterval(this.starInterval)
      this.starInterval = null
    }

    this.curIndex = 0
    this.stars = []
    this.starInterval = setInterval(() => {
      if (this.curIndex >= this.starCount) {
        clearInterval(this.starInterval)
        this.starInterval = null
        return
      }
      this.stars.push({ left: this.random(1,100), top: this.random(1,100), width: this.random(15,60) })
      this.curIndex++
    }, 500);
  },
  methods: {
    random(min, max) {
      return Math.floor(Math.random() * (max - min)) + min;
    },
  }
}
</script>

<style lang="scss" scoped>
.stars {
  position: fixed;
  pointer-events: none;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  z-index: 2;
  .shine {
    background-image: url(~@/assets/img/common/shine.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    min-width: 20px;
    min-height: 20px;
    position: absolute;
    animation: starOpacityChange 2s ease-in-out infinite;
  }
  @keyframes starOpacityChange {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}
</style>